<script setup>
import {onMounted, onUnmounted, ref} from "vue";

const props = defineProps({
  banner: {type: Array, default: [], required: true},
})
const state = ref({
  active: 0,
  timer: null
})
onMounted(() => {
  state.value.timer = setInterval(() => {
    state.value.active = (state.value.active + 1) % props.banner.length;
  }, 3000)
})
onUnmounted(() => {
  clearInterval(state.value.timer)
})
</script>

<template>
  <view class="banner-wrap">
    <!--图片容器-->
    <view class="banner-list" :style="{
      width: props.banner.length * 100 + '%',
      marginLeft: -state.active * 100 + '%'
    }">
      <view class="banner-item" v-for="(item,index) in banner" :key="index"
            :style="{backgroundImage: `url('${item}')`}">
      </view>
    </view>
    <view class="banner-indicator">
      <view class="banner-indicator-item" v-for="(item,index) in banner" :key="index"
            :class="{active: state.active === index}"
            :style="{width: 100 / banner.length + '%'}"/>
    </view>
  </view>
</template>

<style scoped>
.banner-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .banner-list {
    height: 100%;
    display: flex;
    flex-direction: row;
    transition: 1s;

    .banner-item {
      display: flex;
      width: 100%;
      height: 100%;
      background-size: cover;
    }
  }

  .banner-indicator {
    z-index: 1;
    left: 8.3%;
    bottom: 6%;
    position: absolute;
    display: flex;
    width: 20%;
    height: 0.3em;
    flex-direction: row;
    background-color: #8a9091;
    border-radius: 2px;

    .banner-indicator-item {
      width: 5%;
      height: 100%;
      border-radius: 2px;
      background-color: transparent;

      &.active {
        background-color: #04c0df;
      }
    }
  }
}
</style>